<template>
  <el-dialog title="属性描述" width="700px" 
  :visible.sync="dialogVisible" 
  :append-to-body="true"
  :center="true"
  :close-on-click-modal="false"
  @opened="handleDialogOpened">
  <el-row :gutter="20" style="height: 500px; overflow: auto;">
    <el-col :span="10" style="height: 500px; overflow: auto;">
      <el-menu :default-active="activeItem" @select='handleMenuSelect'>
        <el-menu-item v-for="(item,index) of attrItems" :key="index" :index="item.name">{{ item.name }}</el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="14" style="margin-top: 20px;">
      <strong style="margin: 10px;">{{ attrDesc }}</strong>
      <ul v-if="attrDetails.length > 0">
        <li v-for="(detail, detailIndex) of attrDetails" :key="detailIndex" style="padding: 10px;">{{ detail }}</li>
      </ul>
    </el-col>
  </el-row>
  </el-dialog>
</template>

<script>
import ConfigUtil from '@/utils/graph-utils/configUtil.js'
export default {
  name: 'AttrsDescDialog',
  data() {
    return {
      dialogVisible: false,

      attrItems: [],
      attrDesc: '',
      attrDetails: [],
      activeItem: ''
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
    },

    handleDialogOpened() {
      this.attrItems = []
      this.attrDesc = ''
      this.attrDetails = []
      this.activeItem = ''

      this.attrItems = ConfigUtil.getAttrConfigDesc()
      if (this.attrItems.length > 0) {
        this.activeItem = this.attrItems[0].name
        this.attrDesc = this.attrItems[0].desc
        this.attrDetails = this.attrItems[0].details || []
      }
    },

    handleMenuSelect(attrName) {
      const index = this.attrItems.findIndex(value => {
        return value.name === attrName
      })
      if (index !== -1) {
        this.attrDesc = this.attrItems[index].desc
        this.attrDetails = this.attrItems[index].details || []
      } else {
        this.attrDesc = '未找到对应描述'
        this.attrDetails = []
      }
    }
  }
}
</script>